<template>
	<el-container>
		<el-aside width="auto">
			<navSide :isCollapse="isCollapse"/>
		</el-aside>
		<el-container>
				<el-header>
					<navHeader v-model:isCollapse="isCollapse"/>	
				</el-header>
			<el-main>
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>

<script lang="ts" setup>
	import {
		ref
	} from 'vue'
	import navHeader from './components/navHeader.vue'
	import navSide from './components/navSide.vue'

	let isCollapse = ref(false)
	
</script>

<style lang="scss" scoped>
	.el-header {
		padding: 0;
		border-bottom: 1px solid #eee;
	}
	
	.el-main {
		background-color: #eee;
	}
</style>
